<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title></title>
</head>
<body>
<!--弹窗：编辑-->
<div th:fragment="appointimeruleAddOrUpdate" class="modal inmodal fade" id="appointimeruleAddOrUpdate_Modal"
     tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>
                <h4 class="modal-title">编辑规则</h4>
                <small class="font-bold"></small>
            </div>
            <div class="modal-body">
                <form role="form" id="appointimeruleAddOrUpdate_form">
                    <input id="appointimeruleAddOrUpdate_id" name="id" type="hidden">
                    <div class="form-group"><label>标题</label> <input
                            id="appointimeruleAddOrUpdate_title" name="title"
                            type="text" placeholder="" class="form-control"></div>
                    <div class="form-group"><label>工作角色</label>
                        <select class="form-control" id="appointimeruleAddOrUpdate_workerRole" name="workerRole">

                        </select>
                    </div>
                    <div class="form-group"><label>工作时间间隔（分钟）</label> <input
                            id="appointimeruleAddOrUpdate_interval" name="interval"
                            type="text" placeholder="工作时间间隔" class="form-control"></div>
                    <div class="form-group"><label>自动生成天数</label> <input
                            id="appointimeruleAddOrUpdate_activeDay" name="activeDay"
                            type="text" placeholder="自动生成天数" class="form-control"></div>
                    <div class="form-group"><label>是否自动生成工作时间</label>
                        <div class="i-checks">
                            <label> <input type="radio" value="1" name="isAuto"> <i></i> 是
                            </label>&nbsp;&nbsp;
                            <label> <input type="radio" value="0" name="isAuto"> <i></i> 否
                            </label>
                        </div>
                    </div>
                    <div class="form-group"><label>备注</label> <textarea
                            id="appointimeruleAddOrUpdate_remark" name="remark"
                            type="text" placeholder="" class="form-control"></textarea>
                    </div>
                </form>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="appointimeruleAddOrUpdateObj.submitHandler()">
                    保存
                </button>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        $(function () {
            $('.i-checks').iCheck({
                checkboxClass: 'icheckbox_square-green',
                radioClass: 'iradio_square-green',
            });
            appointimeruleAddOrUpdateObj.myValidator = $('#appointimeruleAddOrUpdate_form').validate({
                rules: appointimeruleAddOrUpdateObj.dataRule,
                submitHandler: function (form) {
                    appointimeruleAddOrUpdateObj.dataFormSubmit(form);
                }
            });
            $.myGet({
                url: `/appoin/appointimerule/roleList`,
                success: function (data) {
                    if (data && data.code === 0) {
                        data.list.map(o => {
                            $('#appointimeruleAddOrUpdate_workerRole').append($(`<option value="${o.value}">${o.text}</option>`));
                        });
                    } else {
                        toastr.error(data.msg, '操作失败')
                    }
                }
            })
        })
        var appointimeruleAddOrUpdateObj = new Object({
            myValidator: undefined,
            dataRule: {
                title: {
                    required: true
                }, interval: {
                    required: true
                }, activeDay: {
                    required: true
                }, isAuto: {
                    required: true
                }, remark: {
                    maxlength: 400
                }
            },
            init: function (id) {
                if (id) {
                    $.myGet({
                        url: `/appoin/appointimerule/info/${id}`,
                        success: function (data) {
                            if (data && data.code === 0) {
                                appointimeruleAddOrUpdateObj.fillForm(data.appoinTimeRule);
                            } else {
                                toastr.error(data.msg, '操作失败')
                            }
                        }
                    })
                } else {
                    appointimeruleAddOrUpdateObj.fillForm();
                }
            },
            fillForm: function (data = {interval: 15, activeDay: 14, isAuto: false}) {
                $("#appointimeruleAddOrUpdate_form")[0].reset();
                $("input[type='hidden']").val("");
                for (let i in data) {
                    if ($("#appointimeruleAddOrUpdate_form").find(`[name=${i}]`).length > 0) {
                        $("#appointimeruleAddOrUpdate_form").find(`[name=${i}]`).val(data[i])
                    }
                }
                $(`input:radio[value=${data.isAuto}]`).iCheck('check');
            },
            submitHandler: function () {
                $("#appointimeruleAddOrUpdate_form").submit();
            },
            dataFormSubmit: function (form) {
                let formVals = $(form).serializeArray();
                let data = {}
                for (let i = 0; i < formVals.length; i++) {
                    data[formVals[i].name] = formVals[i].value;
                }
                $.myPost({
                    url: `/appoin/appointimerule/${data.id ? 'update' : 'save'}`,
                    dataType: 'json',
                    data: data,
                    success: function (data) {
                        if (data && data.code === 0) {
                            toastr.success(data.msg, '操作提示')
                            $('#appointimeruleAddOrUpdate_Modal').modal('hide')
                            appointimeruleListObj.refreshDataList();
                            appointimeruleAddOrUpdateObj.fillForm();
                        } else {
                            toastr.error(data.msg, '操作失败')
                        }
                    }
                })
            }
        })
    </script>
</div>
</body>
</html>